<template>
  <div>
    <!--start 购物车-->
    <div class="list">
      <div v-if="vue_list_allGoods.length == 0" class="noneGoods">
        <em class="iconfont">&#xe617;</em>
        <span>购物车没有商品哦</span>
      </div>
      <ul v-else>
        <li class="clearfix" v-for="(item,index) in vue_list_allGoods" >
          <div class="fl checkboxDiv">
            <Checkbox v-model="item.selectItem"></Checkbox>
          </div>
          <div class="fl contentDiv">
            <div class="img fl">
              <img :src="item.goodsBigPic" width="80%" height="auto" alt="" />
            </div>
            <div class="goodsDetail fl">
              <p>{{item.goodsName}}</p>
              <p>{{item.goodsSkuValue}}</p>
              <div class="clearfix">
								<span class="fl">
									&yen;
									<span>{{Public.formatMoney(item.goodsSalePrice,2)}}</span>
								</span>
                <el-input-number v-model="item.goodsBuyNum" class="fr countN" :max="100" :min="1"></el-input-number>
              </div>
              <div class="deleteIcon" @click="vFun_goods_delete(item.cartGoodsCode)">
                <i class="iconfont">&#xe61c;</i>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!--end 购物车-->
    <!--start footer-->
    <div class="footer clearfix" v-if="!vue_edit">
      <div class="selectAll fl">
        <Checkbox v-model="vue_checkbox_allSelect">全选</Checkbox>
      </div>
      <div class="countPric fl">
        <p>合计：&yen;{{Public.formatMoney(finalCountPric,2)}}</p>
        <p>总额：&yen;{{Public.formatMoney(countPric,2)}} 立减：&yen;{{Public.formatMoney(countFavourablePric,2)}}</p>
      </div>
      <div class="okBtn fr" @click="vFun_okBtn">
        去结算
      </div>
    </div>
    <div class="footer clearfix" v-else>
      <div class="selectAll fl">
        <Checkbox v-model="vue_checkbox_allSelect">全选</Checkbox>
      </div>
      <span class="fr red" @click="vFun_goods_delate">删除</span>
    </div>
    <vue-footer></vue-footer>
    <!--end footer-->
  </div>
</template>

<script>
  import { Toast } from 'mint-ui'; //引入弹框
  import { MessageBox } from 'mint-ui';
  import vueFooter from '../../components/footer/shopFooter';     //引入底部
  export default {
    components: {
      vueFooter
    },
    data() {
      return {
        vue_header_title: '购物车',
        vue_list_allGoods: [],
        vue_clone_allGoods: [], //存储克隆出来的list
        vue_header_rightText: "编辑", //头部右边按钮文本
        vue_checkbox_allSelect: false, //全部选择
        vue_edit: false //是否显示编辑按钮
      }
    },
    watch: {
      vue_checkbox_allSelect: function(val) { //控制全选
        this.vue_list_allGoods.forEach((item, index, arr) => {
          item.selectItem = val
        })
      },
      vue_list_allGoods: { //监听加减数量
        handler: function(val, oldVal) {
          if(oldVal.length && this.vue_clone_allGoods.length) {
            val.forEach((item, index, arr) => {
              if(item.goodsBuyNum != this.vue_clone_allGoods[index].goodsBuyNum) {
                this.axios({
                  method: "PUT",
                  url: "/v3/sale/cartGoodss/" + item.cartGoodsCode,
                  data: {
                    "goodsBuyNum": item.goodsBuyNum
                  }
                }).then((res) => {
                  this.vue_clone_allGoods = JSON.parse(JSON.stringify(arr)); //复制一份备用
                  //									Toast({
                  //										message: '操作成功',
                  //										iconClass: 'fontSize iconfont icon-chenggong'
                  //									});
                }).catch((err) => {
                  Toast({
                    message: '操作失败',
                    iconClass: 'fontSize iconfont icon-shibai'
                  });
                })
              };
            });
            /* 当没有任何一项商品被选中时，就去掉全选checkbox的勾 */
            if(val.every((item, index, arr) => {
                return !item.selectItem;
              })) {
              this.vue_checkbox_allSelect = false;
            }
          }
        },
        deep: true
      }
    },
    filters: {
      pricInteger(pric, num) { //过滤器，显示单价和数量的乘
        return parseFloat(pric) * parseFloat(num);
      }
    },
    computed: {
      vue_list_checkboxGoods: function() { //获取选中的商品
        return this.vue_list_allGoods.filter((item, index, arr) => {
          if(item.selectItem) {
            return item
          }
        })
      },
      countPric: function() { //统计总价
        return this.vue_list_checkboxGoods.reduce((previousValue, currentValue) => {
          return previousValue + (parseFloat(currentValue.goodsSalePrice) * parseFloat(currentValue.goodsBuyNum))
        }, 0)
      },
      countFavourablePric: function() { //统计总的优惠
        return this.vue_list_checkboxGoods.reduce((previousValue, currentValue) => {
          return previousValue + currentValue.discountPrice
        }, 0)
      },
      finalCountPric: function() { //统计实际总额
        return this.countPric + this.countFavourablePric;
      },

    },
    methods: {
      queryByPage() { //获取数据
        this.axios({
          method: "POST",
          url: "/v3/sale/cartGoodss/listAll",
          data: {}
        }).then((res) => {
          res.data.list.forEach((item, index, arr) => {
            item.selectItem = false;
          });
          this.vue_list_allGoods = res.data.list;
          this.vue_clone_allGoods = JSON.parse(JSON.stringify(this.vue_list_allGoods));
          this.vue_list_allGoods[0].selectItem = true;
        }).catch((err) => {
        })
      },
      vFun_goods_deleteCall(cartGoodsCodeStr) {
        this.axios({
          method: "DELETE",
          url: "/v3/sale/cartGoodss/" + cartGoodsCodeStr
        }).then((res) => {
          this.queryByPage();
          this.Public.vFun_openSuccess('操作成功');
        }).catch((err) => {
          this.Public.vFun_openError('操作失败');
        })
      },
      vFun_goods_delete(cartGoodsCodeStr) {
        MessageBox({
          title: '提示',
          message: '请确认是否删除商品？',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonClass: 'redBg',
          showCancelButton: true
        }).then(btnType => {
          if(btnType == 'confirm') {
            this.vFun_goods_deleteCall(cartGoodsCodeStr);
          }
        })
      },
      vFun_okBtn() {
        if(this.vue_list_checkboxGoods.length) {
          localStorage.setItem('select_goods', JSON.stringify(this.vue_list_checkboxGoods));
          this.$router.push({
            path: '/saveOrder'
          });
        } else {
          this.Public.vFun_openInfo('您还没有选择商品哦！');
          //			Toast({
          //				  message: '您还没有选择商品哦！'
          //				});
        }
      },
      vFun_edit_tabs() {
        this.vue_edit = !this.vue_edit;
        if(this.vue_edit) {
          this.vue_header_rightText = '完成';
        } else {
          this.vue_header_rightText = '编辑';

        }
      },
      vFun_goods_delate() {
        if(this.vue_list_checkboxGoods.length && this.$store.state.vue_btn_doubleClick) {
          this.$store.commit('set_doubleClick', false);
          MessageBox({
            title: '提示',
            message: '请确认是否删除商品？',
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            confirmButtonClass: 'redBg',
            showCancelButton: true
          }).then(btnType => {
            if(btnType == 'confirm') {
              let cartGoodsCodeStr = '';
              this.vue_list_checkboxGoods.forEach((item, index, arr) => {
                cartGoodsCodeStr += item.cartGoodsCode + ',';
              });
              this.axios({
                method: "DELETE",
                url: "/v3/sale/cartGoodss/" + cartGoodsCodeStr
              }).then((res) => {
                this.queryByPage();
                this.Public.vFun_openSuccess('操作成功');
                this.$store.commit('set_doubleClick', true);
              }).catch((err) => {
                this.Public.vFun_openError(err.response.data);
                this.$store.commit('set_doubleClick', true);
              })
            }
          })
        } else {
          this.Public.vFun_openInfo('您还没有选择商品哦!');
        }

      }
    },
    created() {
    },
    activated() {
      document.querySelector('#vue_id_title').innerHTML="购物车";
      this.queryByPage(); //查询购物车列表
    },
    mounted() {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .noneGoods{
    overflow: hidden;
    width: 100%;
    text-align: center;
  }

  .noneGoods em{
    font-size: 4rem;
    color: #999999;
  }

  .noneGoods span{
    color: #999999;
    display: block;
  }

  .sreePublic>span {
    color: #bbb;
    font-size: .43rem;
    padding-right: 10px;
  }

  .list {
    margin-top: 0.2rem;
    margin-bottom: 2.93rem;
  }

  .list ul li {
    width: 100%;
    height: 3.58rem;
    border-bottom: 1px solid #bbb;
  }

  .checkboxDiv {
    width: 1rem;
    line-height: calc(2.5rem + 10px);
    text-align: center;
  }

  .contentDiv {
    width: 9rem;
    height: 3.58rem;
    padding: 10px 10px 10px 0;
  }

  .contentDiv .img {
    width: 2.5rem;
    height: 2.5rem;
    line-height: calc(2.5rem - 8px);
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
    text-align: center;
  }

  .contentDiv .img img {
    display: inline-block;
    vertical-align: middle;
  }

  .contentDiv .goodsDetail {
    position: relative;
    width: 5.5rem;
    height: 100%;
  }

  .contentDiv .goodsDetail p:nth-of-type(1) {
    height: .65rem;
    line-height: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .contentDiv .goodsDetail p:nth-of-type(2) {
    height: 0.65rem;
    line-height: 0.65rem;
    font-size: 12px;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contentDiv .goodsDetail>div:nth-of-type(1) {
    color: #D50B0A;
    margin-top: 5px;
  }

  .contentDiv .goodsDetail div:nth-of-type(1)>span>span {
    font-size: .4rem;
    font-weight: bold;
  }

  .countN {
    width: 2.8rem;
  }

  .deleteIcon {
    position: absolute;
    right: .1rem;
    bottom: -.3rem;
  }

  .deleteIcon>i {
    font-size: .5rem;
    color: #ccc;
  }

  .footer {
    position: fixed;
    width: 100%;
    height: 1.33rem;
    bottom: 1.6rem;
    left: 0;
    z-index: 2;
    background: #fff;
    border-top: 1px solid #ccc;
  }

  .footer .selectAll {
    width: 2rem;
    height: 1.33rem;
    line-height: 1.33rem;
    text-align: center;
  }

  .footer .countPric {
    width: 5rem;
    overflow: hidden;
  }

  .footer .countPric>p:nth-of-type(1) {
    height: .7rem;
    line-height: .7rem;
  }

  .footer .countPric>p:nth-of-type(2) {
    height: .5rem;
    line-height: .5rem;
    font-size: 12px;
    color: #ccc;
  }

  .footer .okBtn {
    width: 3rem;
    height: 1.4rem;
    line-height: 1.4rem;
    background: #D50B0A;
    color: #fff;
    text-align: center;
  }

  .footer>span {
    width: 2.08rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 0.265rem;
    margin-right: 10px;
  }

  .footer>span.red {
    color: #D50B0A;
    border-color: #D50B0A;
  }
</style>
